<template>
  <el-card>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <TopView title="今日销售额" :number="`30346799`">
          <div>日同比-19.16</div>
          <div>日同比-19.16</div>
          <template #footer> 昨日销售额 &yen;3600000 </template>
        </TopView>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <TopView title="今日订单" :number="`30346799`">
          <LineChart />
          <template #footer> 昨日订单量 &yen; 3600000 </template>
        </TopView>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <TopView title="今日交易用户数" :number="`30346799`">
          <Bar01Chart />
          <template #footer> 退货率 50% </template>
        </TopView>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <TopView title="累计用户数" :number="`30346799`">
          <Bar02Chart />
          <template #footer>
            日同比 17.70% <el-icon color="green"><ArrowUp /></el-icon>月同比
            17.70%
            <el-icon color="red"><ArrowDown /></el-icon>
          </template>
        </TopView>
      </el-col>
    </el-row>
    <MapVue />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XHome",
};
</script>
<script lang="ts" setup>
import TopView from "./components/TopView.vue";
import Bar01Chart from "./components/Bar01Chart.vue";
import Bar02Chart from "./components/Bar02Chart.vue";
import LineChart from "./components/LineChart.vue";
import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { onMounted } from "vue";
import { reqMockData } from "@/api/product/mock";
import MapVue from "./components/Map.vue";
import axios from "axios";
onMounted(() => {
  console.log(555);
  reqMockData()
    .then((res) => {
      console.log(res);
    })
    .catch((error) => {
      console.log("error", error);
    });
});
</script>

<style scoped></style>
